<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  [help_message_content]="'alert.help.center' | i18n"
  [guild_link]="'alert.help.center.link' | i18n"
  [module_name]="'menu.alert.center'"
  [icon_name]="'alert'"
></app-help-message-show>

<nz-divider></nz-divider>

<app-toolbar>
  <ng-template #left>
    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>

    <button nz-button nzType="primary" (click)="onMarkReadAlerts()">
      <i nz-icon nzType="down-circle" nzTheme="outline"></i>
      {{ 'alert.center.deal' | i18n }}
    </button>
    <button nz-button nzType="primary" nzDanger (click)="onMarkUnReadAlerts()" class="mobile-hide">
      <i nz-icon nzType="up-circle" nzTheme="outline"></i>
      {{ 'alert.center.no-deal' | i18n }}
    </button>
    <button nz-button nzType="primary" nzDanger (click)="onDeleteAlerts()" class="mobile-hide">
      <i nz-icon nzType="delete" nzTheme="outline"></i>
      {{ 'alert.center.delete' | i18n }}
    </button>
    <button nz-button nzType="primary" nzDanger (click)="onClearAllAlerts()">
      <i nz-icon nzType="clear" nzTheme="outline"></i>
      {{ 'alert.center.clear' | i18n }}
    </button>
  </ng-template>
  <ng-template #right>
    <nz-select
      class="mobile-hide"
      nzAllowClear
      [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
      [(ngModel)]="filterPriority"
      (ngModelChange)="loadAlertsTable()"
    >
      <nz-option [nzLabel]="'alert.priority.all' | i18n" [nzValue]="9"></nz-option>
      <nz-option [nzLabel]="'alert.priority.2' | i18n" [nzValue]="2"></nz-option>
      <nz-option [nzLabel]="'alert.priority.1' | i18n" [nzValue]="1"></nz-option>
      <nz-option [nzLabel]="'alert.priority.0' | i18n" [nzValue]="0"></nz-option>
    </nz-select>
    <nz-select
      class="mobile-hide"
      nzAllowClear
      [nzPlaceHolder]="'alert.center.filter-status' | i18n"
      [(ngModel)]="filterStatus"
      (ngModelChange)="loadAlertsTable()"
    >
      <nz-option [nzLabel]="'alert.status.all' | i18n" [nzValue]="9"></nz-option>
      <nz-option [nzLabel]="'alert.status.0' | i18n" [nzValue]="0"></nz-option>
      <nz-option [nzLabel]="'alert.status.2' | i18n" [nzValue]="2"></nz-option>
      <nz-option [nzLabel]="'alert.status.3' | i18n" [nzValue]="3"></nz-option>
    </nz-select>
    <app-multi-func-input
      groupStyle="width: 250px;"
      class="mobile-hide"
      [placeholder]="'alert.center.search' | i18n"
      [(value)]="filterContent"
      (keydown.enter)="loadAlertsTable()"
    />
  </ng-template>
</app-toolbar>

<nz-table
  #fixedTable
  [nzData]="alerts"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1240px' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzWidth="17%">{{ 'alert.center.target' | i18n }}</th>
      <th nzAlign="center" nzWidth="9%">{{ 'alert.center.priority' | i18n }}</th>
      <th nzAlign="center" nzWidth="20%">{{ 'alert.center.content' | i18n }}</th>
      <th nzAlign="center" nzWidth="17%">{{ 'alert.center.tags' | i18n }}</th>
      <th nzAlign="center" nzWidth="9%">{{ 'alert.center.status' | i18n }}</th>
      <th nzAlign="center" nzWidth="12%">{{ 'alert.center.time' | i18n }}</th>
      <th nzAlign="center" nzWidth="13%">{{ 'common.edit' | i18n }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center">{{ renderAlertTarget(data.target) }}</td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.priority == 0" nzColor="red">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.0' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.priority == 1" nzColor="orange">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.1' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
          <i nz-icon nzType="bell" nzTheme="outline"></i>
          <span>{{ 'alert.priority.2' | i18n }}</span>
        </nz-tag>
      </td>
      <td nzAlign="left">{{ data.content }}</td>
      <td nzAlign="left">
        <span *ngFor="let tag of data?.tmp; let i = index">
          <a [routerLink]="['/monitors/' + tag.tagValue]" *ngIf="tag.name == 'monitorId'">
            <nz-tag class="hoverClass" nzColor="magenta" style="margin-top: 2px">
              <span nz-icon nzType="area-chart"></span>
              {{ sliceTagName(tag) }}
            </nz-tag>
          </a>
          <nz-tag *ngIf="tag.name != 'monitorId'" style="margin-top: 2px">
            {{ sliceTagName(tag) }}
          </nz-tag>
        </span>
      </td>
      <td nzAlign="center">
        <nz-tag [nzColor]="data.status == 3 ? '' : 'orange'">
          {{ 'alert.status.' + data.status | i18n }}
        </nz-tag>
      </td>
      <td nzAlign="center">
        <nz-tag nz-tooltip [nzTooltipTitle]="'alert.center.time.tip' | i18n : { times: data.times }" nzTooltipPlacement="top">
          {{ 'alert.center.first-time' | i18n }} : {{ data.firstAlarmTime | date : 'YYYY-MM-dd HH:mm:ss' }}
        </nz-tag>
        <span
          nz-icon
          nzType="arrow-down"
          nzTheme="outline"
          nz-tooltip
          [nzTooltipTitle]="'alert.center.time.tip' | i18n : { times: data.times }"
          nzTooltipPlacement="left"
        ></span>
        <nz-tag
          nz-tooltip
          [nzTooltipTitle]="'alert.center.time.tip' | i18n : { times: data.times }"
          nzTooltipPlacement="bottom"
          nzColor="processing"
        >
          {{ 'alert.center.last-time' | i18n }} : {{ data.lastAlarmTime | date : 'YYYY-MM-dd HH:mm:ss' }}
        </nz-tag>
      </td>
      <td nzAlign="center">
        <div class="actions">
          <button
            *ngIf="data.status != 3"
            nz-button
            nzType="primary"
            (click)="onMarkReadOneAlert(data.id)"
            nz-tooltip
            [nzTooltipTitle]="'alert.center.deal' | i18n"
          >
            <i nz-icon nzType="down-circle" nzTheme="outline"></i>
          </button>
          <button
            *ngIf="data.status == 3"
            nz-button
            nzType="primary"
            nzDanger
            (click)="onMarkUnReadOneAlert(data.id)"
            nz-tooltip
            [nzTooltipTitle]="'alert.center.no-deal' | i18n"
          >
            <i nz-icon nzType="up-circle" nzTheme="outline"></i>
          </button>
          <button
            nz-button
            nzType="primary"
            nzDanger
            (click)="onDeleteOneAlert(data.id)"
            nz-tooltip
            [nzTooltipTitle]="'alert.center.delete' | i18n"
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </button>
        </div>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>
